<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <h2>title == {{ title }}</h2>
            <my-head></my-head>
            <Home msg="are you ok?" count="3333" :word="word" :title="title" :num="1314520"></Home>
            <Parent id="2309" :flag="flag"></Parent>
        </div>
    </div>

    <template id="home">
        <div>
            <h2>Home = HOme - 1 </h2>
            <h2>Home = HOme - 2 </h2>
            <h2>Home = HOme - 3 </h2>
            <h2>msg = {{msg}} count = {{count}} </h2>
            <h2>word == {{word}}</h2>
            <h2>title === {{ title }} -- {{num}} </h2>
            <hr>
        </div>
    </template>

    <template id="parent">
        <div>
            <h2>Parent = Parent - 父组件 </h2>
            <h2>id = {{ id }}</h2>
            <h2 @click="flag=!flag"> flag == {{flag }}</h2>
            <hr>
            <child-one :prop-a="propA" :prop-b="propB" :prop-c="propC" :prop-d="propD" :count="count" :toggle="toggle"
                :list="list" v-if="flag"></child-one>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone = childone - 1 - 子组件 </h2>
            <h2>地址 = {{ propA}} - {{ propB}} - {{ propC}} - {{ propD}} </h2>
            <h2>count = {{ count}} </h2>
            <h2>toggle = {{ toggle}} </h2>
            <h2>list = {{ list}} </h2>
        </div>
    </template>
    <script>
        Vue.component('my-head', {
            template: '<h2>Head - Head - 自定义头部</h2>'
        })
        const Home = {
            template: "#home",
            props: ['msg', 'count', 'word', 'title', 'num'],    // 接受外部的参数
        }
        Vue.component('Home', Home)
        Vue.component('Parent', {
            template: "#parent",
            data() {
                return {
                    propA: "武汉",
                    propB: "江夏区",
                    propC: "金融港B18",
                    propD: '千锋教育',
                    count: 2000,
                    toggle: !!1,
                    list: [1, 2, 3, 4, 5]
                }
            },
            props: ['id', 'flag'],  // 数组形势
            components: {
                childOne: {
                    template: '#childone',
                    props: {    // 对象格式 props 格式校验
                        propA: String,
                        propB: [
                            String, Number
                        ],
                        propC: {
                            type: String
                        },
                        propD: {
                            type: String,
                            default() {
                                return '千锋武汉教育集团'
                            }
                        },
                        count: {
                            type: Number,
                            default() {
                                return 999;
                            }
                        },
                        toggle: Boolean,
                        list: [Array, Object],
                    }
                }
            }
        })

        const vm = new Vue({
            el: "#app",
            data: {
                title: '组件属性 - props',
                word: '2309',
                flag: true,
            }
        })
    </script>
    <!--
        Prop 是你可以在组件上注册的一些自定义 attribute 
        <A>
            <B></B>
        </A>

        props  组件接受的外部数据   read-only 
        通过 Prop 向子组件传递数据  单向数据流   


        props 属性   用来传递(父组件传给子组件)组件的参数 (动态&静态)   v-bind
        props 只能用来传递数据  不可以修改   

        动态props v-bind 
        静态props 没有 v-bind 

        props 驼峰命名   user-name="zuozuomu"

        props 校验  格式类型
        String    
        Number
        Boolean
        Array
        Object
        Date
        Function
        Symbol  符号
    -->
</body>

</html>